<template>
  <div style="padding-left: 50px">
    <div class="linlsit">
      <div class="labname">
        <span>图例名称：</span>
      </div>
      <div class="labinput">
        <el-input v-model="form.legendName" placeholder="请输入图例名称" size="small"
                  style="width: 100%!important;"></el-input>
      </div>
    </div>
    <div class="linlsit">
      <div class="labname">
        <span>图例编号：</span>
      </div>
      <div class="labinput">
        <el-input v-model="form.legendConfig.legendCode" placeholder="请输入图例编号" size="small"
                  style="width: 100%!important;"></el-input>
      </div>
    </div>
    <div class="linlsit">
      <div class="labname">
        <span>图例类型：</span>
      </div>
      <div class="labiimg">
        <div :class="{ 'imgcine active': form.legendType===0, 'imgcine': form.legendType!=0 }"
             @click="form.legendType=0">
          <img src="../assets/img/基本.svg" alt="">
          <span>基本</span>
        </div>
        <div :class="{ 'imgcine active': form.legendType===1, 'imgcine': form.legendType!=1 }"
             @click="form.legendType=1">
          <img src="../assets/img/单值.svg" alt="">
          <span>单值</span>
        </div>
        <div :class="{ 'imgcine active': form.legendType===2, 'imgcine': form.legendType!=2 }"
             @click="form.legendType=2">
          <img src="../assets/img/分级.svg" alt="">
          <span>分级</span>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="linlsit" v-if="form.legendType===0">
      <div class="labname">
        <span>统一设置：</span>
      </div>
      <div class="labinput">
        <span style="font-size: 10px;color: #b8b8b8">元素用统一样式</span>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType===1">
      <div class="labname">
        <span>单值设置：</span>
      </div>
      <div class="labinput" style="width: 400px">
        <span style="font-size: 10px;color: #b8b8b8">分类字段不支持字段属性分类计数均相同的字段</span>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType===2">
      <div class="labname">
        <span>分级设置：</span>
      </div>
      <div class="labinput" style="width: 400px">
        <span style="font-size: 10px;color: #b8b8b8">分级仅支持字段类型为“浮点型、整型”的字段</span>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType===1">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 800px">分类字段：
          <el-select v-model="form.fieldId" clearable filterable placeholder="图层字段" size="small"
                     style="width: 16% !important;margin: 0 10px;">
            <el-option
                v-for="item in lsylist"
                :key="item.fieldId"
                :label="item.fieldName"
                :value="item.fieldId">
            </el-option>
          </el-select>
          <el-select v-model="form.fieldId" clearable filterable placeholder="关联表" size="small"
                     style="width: 16% !important;margin: 0 10px;">
            <el-option
                v-for="item in lsylist"
                :key="item.fieldId"
                :label="item.fieldName"
                :value="item.fieldId">
            </el-option>
          </el-select>
          <el-select v-model="form.fieldId" clearable filterable placeholder="关联字段" size="small"
                     style="width: 16% !important;margin: 0 10px;">
            <el-option
                v-for="item in lsylist"
                :key="item.fieldId"
                :label="item.fieldName"
                :value="item.fieldId">
            </el-option>
          </el-select>
          <el-select v-model="form.fieldId" clearable filterable placeholder="值字段" size="small"
                     style="width: 16% !important;margin: 0 10px;">
            <el-option
                v-for="item in lsylist"
                :key="item.fieldId"
                :label="item.fieldName"
                :value="item.fieldId">
            </el-option>
          </el-select>
          <el-button type="primary" size="small" style="margin-left: 10px"  @click="addlist">添加字段值</el-button>
        </div>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType===2">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 800px">分类字段：
          <el-select v-model="form.fieldId" clearable filterable placeholder="图层字段" size="small"
                     style="width: 16% !important;margin: 0 10px;">
            <el-option
                v-for="item in lsylist"
                :key="item.fieldId"
                :label="item.fieldName"
                :value="item.fieldId">
            </el-option>
          </el-select>
          <el-select v-model="form.fieldId" clearable filterable placeholder="关联表" size="small"
                     style="width: 16% !important;margin: 0 10px;">
            <el-option
                v-for="item in lsylist"
                :key="item.fieldId"
                :label="item.fieldName"
                :value="item.fieldId">
            </el-option>
          </el-select>
          <el-select v-model="form.fieldId" clearable filterable placeholder="关联字段" size="small"
                     style="width: 16% !important;margin: 0 10px;">
            <el-option
                v-for="item in lsylist"
                :key="item.fieldId"
                :label="item.fieldName"
                :value="item.fieldId">
            </el-option>
          </el-select>
          <el-select v-model="form.fieldId" clearable filterable placeholder="值字段" size="small"
                     style="width: 16% !important;margin: 0 10px;">
            <el-option
                v-for="item in lsylist"
                :key="item.fieldId"
                :label="item.fieldName"
                :value="item.fieldId">
            </el-option>
          </el-select>
          <el-button type="primary" size="small" style="margin-left: 10px"  @click="addlist">添加分级区间</el-button>
        </div>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType===0">
      <div class="labname">
      </div>
      <div class="stylecontaine">
        <el-divider content-position="center" class="tiplin">样式设置</el-divider>
        <div class="stylerk">
          <div class="stylitem tinachon">
            <div><span>填充颜色：</span></div>
            <el-color-picker show-alpha v-model="form.valConfig.fillColor" size="small"></el-color-picker>
          </div>
          <div class="stylitem">
            <span>轮廓颜色：</span>
            <el-color-picker show-alpha v-model="form.valConfig.borderColor" size="small"></el-color-picker>
          </div>
          <div class="stylitem lunkuo">
            <span>轮廓宽度：</span>
            <el-input v-model="form.valConfig.borderWidth" placeholder="px" size="small"
                      style="width: 40%!important;"></el-input>
          </div>
        </div>
      </div>
      </div>
    <div class="linlsit" v-if="form.legendType===1">
      <div class="labname">
      </div>
      <div class="forcntaine">
        <div class="listeinr">
          <span style="margin-bottom: 10px;margin-top: -5px">字段值</span>
          <div v-for="(item,index) in form.valConfig.valulist" style="margin-bottom:11px" :key="index">
            <i class="el-icon-delete" v-if="form.valConfig.valulist.length>1" @click="removeDomain(item)"></i>
            <el-input v-model="item.value" placeholder="字段值" size="small"
                      style="width: 60%!important;margin-left: 12%"></el-input>
          </div>
        </div>
      <div class="stylecontaine">
        <el-divider content-position="center" class="tiplin">样式设置</el-divider>
        <div  v-for="(item,index) in form.valConfig.valulist" :key="index">
        <div class="stylerk">
          <div class="stylitem tinachon">
            <div><span>填充颜色：</span></div>
            <el-color-picker show-alpha v-model="item.fillColor" size="small"></el-color-picker>
          </div>
          <div class="stylitem">
            <span>轮廓颜色：</span>
            <el-color-picker show-alpha v-model="item.borderColor" size="small"></el-color-picker>
          </div>
          <div class="stylitem lunkuo">
            <span>轮廓宽度：</span>
            <el-input v-model="item.borderWidth" placeholder="px" size="small"
                      style="width: 40%!important;"></el-input>
          </div>
        </div>
      </div>
      </div>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType===2">
      <div class="labname">
      </div>
      <div class="forcntaine">
        <div class="listeinr" style="margin-right: 30px">
          <span style="margin-bottom: 10px;margin-top: -5px">分级区间</span>
          <div v-for="(item,index) in form.valConfig.valulist" style="margin-bottom:11px" :key="index">
            <div style="display: flex;align-items: center">
            <i class="el-icon-delete" v-if="form.valConfig.valulist.length>1" @click="removeDomain(item)"></i>
            <!-- <el-select v-model="item.operator1" placeholder="区间" size="small" style="width: 20%!important;">
              <el-option label="<" :value="3"></el-option>
              <el-option label="<=" :value="4"></el-option>
              <el-option label=">" :value="5"></el-option>
              <el-option label=">=" :value="6"></el-option>
            </el-select> -->
            <el-input v-model="item.value1" type="number" placeholder=">" size="small"
                      style="width: 40%!important;margin-right:2%"></el-input> ~
              <!-- <el-select v-model="item.operator2" placeholder="区间" size="small" style="width: 20%!important;">
                <el-option label="<" :value="3"></el-option>
                <el-option label="<=" :value="4"></el-option>
                <el-option label=">" :value="5"></el-option>
                <el-option label=">=" :value="6"></el-option>
              </el-select> -->
              <el-input v-model="item.value2" type="number" placeholder="<=" size="small"
                        style="width: 40%!important;"></el-input>
          </div>
          </div>
        </div>
        <div class="stylecontaine">
          <el-divider content-position="center" class="tiplin">样式设置</el-divider>
          <div  v-for="(item,index) in form.valConfig.valulist" :key="index">
            <div class="stylerk">
              <div class="stylitem tinachon">
                <div><span>填充颜色：</span></div>
                <el-color-picker show-alpha v-model="item.fillColor" size="small"></el-color-picker>
              </div>
              <div class="stylitem">
                <span>轮廓颜色：</span>
                <el-color-picker show-alpha v-model="item.borderColor" size="small"></el-color-picker>
              </div>
              <div class="stylitem lunkuo">
                <span>轮廓宽度：</span>
                <el-input v-model="item.borderWidth" placeholder="px" size="small"
                          style="width: 40%!important;"></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="linlsit">
      <div class="labname">
        <span>标注设置：</span>
      </div>
      <div class="labinput" style="width: 400px">
        <span style="font-size: 10px;color: #b8b8b8">面中心点显示标注设置，如面上显示“面积、类型”等标注</span>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType!=2">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">显示字段：
          <el-select v-model="form.legendConfig.fieldId" clearable filterable placeholder="请选择" size="small"
                     style="width: 50% !important;">
            <el-option
                v-for="item in lsylist"
                :key="item.fieldId"
                :label="item.fieldName"
                :value="item.fieldId">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType===2">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">显示字段：
          <el-select v-model="form.legendConfig.fieldId" clearable filterable placeholder="请选择" size="small"
                     style="width: 50% !important;">
            <el-option
                v-for="item in twolsylist"
                :key="item.fieldId"
                :label="item.fieldName"
                :value="item.fieldId">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="linlsit" >
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">显示颜色：
          <el-color-picker show-alpha v-model="form.legendConfig.color" size="small"></el-color-picker>
        </div>
      </div>
    </div>
    <div class="linlsit" >
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">显示字体：
          <el-select v-model="form.legendConfig.fontFamily" clearable filterable placeholder="请选择" size="small"
                     style="width: 50% !important;">
            <el-option
                v-for="item in fontFamilyList"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="linlsit" >
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">字体大小：
          <el-input v-model="form.legendConfig.fontSize" placeholder="px" size="small"
                    style="width: 40%!important;"></el-input>
        </div>
      </div>
    </div>
    <div class="linlsit" >
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">显示类型：
          <el-select v-model="form.legendConfig.type" placeholder="显示类型" size="small" >
            <el-option label="标牌" value="label"></el-option>
            <el-option label="文字" value="text"></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="linlsit" >
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">背景颜色：
          <el-color-picker show-alpha v-model="form.legendConfig.bgColor" size="small"></el-color-picker>
        </div>
      </div>
    </div>
    <div class="linlsit" >
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">轮廓颜色：
          <el-color-picker show-alpha v-model="form.legendConfig.borderColor" size="small"></el-color-picker>
        </div>
      </div>
    </div>
    <div class="linlsit" >
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">轮廓宽度：
          <el-input v-model="form.legendConfig.borderWidth" placeholder="px" size="small"
                    style="width: 40%!important;"></el-input>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <el-button type="primary" size="samll" @click="onSubmit">保存</el-button>
  </div>
</template>

<script>
import {api} from "../server/api";
export default {
  name: "addMap",
  data() {
    return {
      lsylist: [],
      twolsylist:[],
      fontFamilyList: [
        '黑体',
        '宋体',
        '新宋体',
        '仿宋',
        '楷体',
        '仿宋_GB2312',
        '楷体_GB2312',
        '微软雅黑体',
      ],
      form: {
        legendName: '',
        legendType: 0,
        mapId:null,
        tableId:1,
        fieldId:'',
        valConfig: {
          fillColor: '',
          borderColor: '',
          borderStyle: 'line',
          valulist:[ {
            fillColor: '',
            borderColor: '',
            borderStyle: 'line',
            value:'',
            value1:'',
            value2:'',
            operator1:5,
            operator2:4,
            key: Date.now()
          }],
        },
        legendConfig: {
          legendCode: '',
          field:'',
          color:'',
          fontFamily:'',
          fontSize:'',
          type:'label',
          bgColor:'',
          borderColor:'',
          borderWidth:''
        }
      }
    }
  },
  mounted() {
    this.getview();
    this.farmOtherMapLegendRangeFlds()
  },
  methods: {
    gedyaje(mapId){
      this.form.mapId=mapId
    },
    farmOtherMapLegendRangeFlds(){
      api.farmOtherMapLegendRangeFlds({}).then(res => {
        this.twolsylist=res
      })
    },
    removeDomain(item) {
      var index = this.form.valConfig.valulist.indexOf(item)
      if (index !== -1) {
        this.form.valConfig.valulist.splice(index, 1)
      }
    },
    addlist(){
      this.form.valConfig.valulist.push({
        fillColor: '',
        borderColor: '',
        borderStyle: 'line',
        value:'',
        value1:'',
        value2:'',
        operator1:5,
        operator2:4,
        key: Date.now()
      })
      console.log( this.form.valConfig.valulist)
    },
    onSubmit(){
      if(!this.form.legendName){
        this.$message('请输入图例名称');
        return
      }
      if(!this.form.legendConfig.legendCode){
        this.$message('请输入图例编号');
        return
      }
      if(this.form.legendType===0){
        let obj=JSON.parse(JSON.stringify(this.form))
        let valConfig=obj.valConfig.valulist
        let list=[]
        let object={}
        valConfig.map(val=>{
          object={
            valConfig:JSON.stringify(val)
          }
          list.push(object)
        })
        obj.legendConfig=JSON.stringify(obj.legendConfig)
        obj['valueLst']=list
        delete obj.valConfig
        this.farmOtherMapLegendAdd(obj)
      }else if(this.form.legendType===1){
        let obj=JSON.parse(JSON.stringify(this.form))
        let valConfig=obj.valConfig.valulist
        let list=[]
        let object={}
        valConfig.map(val=>{
          object={
            value1:val.value,
            valConfig:JSON.stringify(val)
          }
          list.push(object)
        })
        obj.legendConfig=JSON.stringify(obj.legendConfig)
        obj['valueLst']=list
        delete obj.valConfig
        console.log(obj)
         this.farmOtherMapLegendAdd(obj)
      }else{
        let obj=JSON.parse(JSON.stringify(this.form))
        let valConfig=obj.valConfig.valulist
        let list=[]
        let object={}
        valConfig.map(val=>{
          object={
            operator1:val.operator1,
            value1:val.value1,
            operator2:val.operator2,
            value2:val.value2,
            valConfig:JSON.stringify(val)
          }
          list.push(object)
        })
        obj.legendConfig=JSON.stringify(obj.legendConfig)
        obj['valueLst']=list
        delete obj.valConfig
        this.farmOtherMapLegendAdd(obj)
      }

    },
    farmOtherMapLegendAdd(par){
      api.farmOtherMapLegendAdd(par).then(res=>{
        this.$message('操作成功');
        this.$emit('chanke')
      })
    },
    getview() {
      api.farmOtherMapLegendSigFlds({}).then(res => {
        this.lsylist=res
      })
    }
  }
}
</script>

<style scoped>
.linlsit {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.labname {
  width: 90px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.labinput {
  width: 200px;
}

.labiimg {
  display: flex;
  align-items: center;
}

.imgcine {
  width: 60px;
  display: flex;
  flex-direction: column;
  height: 80px;
  justify-content: space-between;
  align-items: center;
  margin-right: 20px;
  font-size: 14px;
}

.active {
  color: rgba(42, 130, 228, 1);
}

.active img {
  border: 1px solid rgba(42, 130, 228, 1);
}

.stylecontaine {
  width: 400px;
  border-right: 1px solid #E0E3E7;
  border-left: 1px solid #E0E3E7;
}

.tiplin {
  margin-top: -0px;
}

.stylerk {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.stylitem {
  display: flex;
  align-items: center;
  font-size: 12px;
  width: 30%;
}

.tinachon {
  margin-left: -30px;
  height: 43px;
  display: flex;
  align-items: center;
  background-color: white;
}

.tinachon div {
  height: 32px;
  display: flex;
  background-color: white;
  align-items: center;
}

.lunkuo {
  margin-right: -40px;
 height: 43px;
  display: flex;
  align-items: center;
  background-color: white;
}
.forcntaine{
  display: flex;
  width: 800px;
}
.listeinr{
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.listeinr .div{
  width: 100%;
  display: flex;
  align-items: center;
}

</style>